import React, { useCallback } from 'react'
import { View, Text, Image } from '@tarojs/components'
import i18n from '@I18N'
import Images from '@ASSET/Images'
import style from './index.module.scss'

interface Props {
  visible: boolean
  onCancel: () => void
  cancelText?: string
  showCancel?: boolean
  cancelColor?: string
  contentClassName?: string
  showCloseIcon?: boolean
  showContentClassName?: string
}

const Modal: React.FC<Props> = ({
  children, visible = false, onCancel, showCancel = true, cancelColor, contentClassName, showCloseIcon = false, showContentClassName,
  cancelText = i18n.button.cancel()
}) => {
  const cancelStyle = { color: cancelColor }
  const onClickCancel = useCallback(
    () => {
      onCancel?.()
    },
    [onCancel],
  )

  const onClickContent = useCallback(
    e => {
      e?.stopPropagation?.()
    },
    [],
  )

  const contentClass = `${style.content} ${contentClassName || ''}`
  const showContentClass = `${style.showContent} ${showContentClassName || ''}`

  return (
    <View onClick={onClickCancel} className={`${style.mask} ${visible ? style.showModal : ''}`} catchMove>
      <View onClick={onClickContent} className={`${contentClass} ${visible ? showContentClass : ''}`}>
        {showCloseIcon && (
          <Image onClick={onClickCancel} className={style.closeIcon} src={Images.close_common} />
        )}
        {children}
        {showCancel && <Text style={cancelStyle} onClick={onClickCancel} className={style.cancelButton}>{cancelText}</Text>}
      </View>
    </View>
  )
}

export default Modal
